<script setup lang="ts">
  import { runBackup } from '@/api/syssetting';
  import { ref } from 'vue';
  import { TableInstance, Message } from '@arco-design/web-vue';
  import Edit from './edit/index.vue';
  import useLoading from '@/hooks/loading';
  import { getMyApproval } from '@/api/approve';
  import { getAllApprovalCat } from '@/api/dataCenter';
  defineOptions({
    name: 'companyList',
  });
  const { loading, setLoading } = useLoading(false);
  const proTableRef = ref<TableInstance | null>(null);
  // 表单类型
  // 表单类型
  const formType = ref([
    {
      label: '审批名称',
      name: 'ins_title',
      fieldProps: {
        span: 8,
      },
    },
    {
      label: '审批状态',
      name: 'state',
      slotName: 'status',
      type: 'a-select',
      fieldProps: {
        span: 8,
      },
      selectOptions: [
        {
          status: 'processing',
          value: 1,
          label: '审核中',
        },
        {
          status: 'warning',
          value: 2,
          label: '已撤销',
        },
        {
          status: 'success',
          value: 3,
          label: '已通过',
        },
        {
          status: 'danger',
          value: 4,
          label: '已拒绝',
        },
      ],
    },
  ]);
  onMounted(async () => {
    getAllApprovalCat().then((res: any) => {
      formType.value.push({
        label: '审批类型',
        name: 'flow_type',
        type: 'a-select',
        fieldProps: {
          span: 8,
          fieldNames: { value: 'type_id', label: 'type_name' },
          allowSearch: true,
        },
        selectOptions: res.data,
      });
    });
  });

  const visible1 = ref(false);
  const editParam = ref();
  const tableType = [
    { dataIndex: 'ins_id', slotName: 'id' },
    {
      title: '审批名称',
      dataIndex: 'ins_title',
    },
    {
      title: '流程类型',
      dataIndex: 'flow_type',
      align: 'center',
    },
    {
      title: '申请人',
      dataIndex: 'user_name',
      align: 'center',
    },
    {
      title: '申请部门',
      dataIndex: 'dept_name',
    },
    {
      title: '审批状态',
      dataIndex: 'state',
      slotName: 'status',
      options: [
        {
          status: 'normal',
          value: 0,
          label: '待提交',
        },
        {
          status: 'processing',
          value: 1,
          label: '审核中',
        },
        {
          status: 'warning',
          value: 2,
          label: '已撤销',
        },
        {
          status: 'success',
          value: 3,
          label: '已通过',
        },
        {
          status: 'danger',
          value: 4,
          label: '已拒绝',
        },
      ],
    },
    {
      title: '抄送人员',
      dataIndex: 'copy',
    },
    {
      title: '审批人员',
      dataIndex: 'approve',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '查阅',
          onClick: (record: any) => {
            visible1.value = true;
            editParam.value = record.ins_id;
          },
        },
      ],
    },
  ];
  async function request(params: any) {
    const res = await getMyApproval(params);
    return {
      data: res.data,
    };
  }
  const showRun = ref(false);
  const handleRunBackup = () => {
    setLoading(true);
    runBackup().then((res) => {
      if (res.code === 200) {
        Message.success(res.msg);
      }
      setLoading(false);
    });
  };
  const sonformType = ref([
    {
      name: 'title',
      label: '备份事件名称',
      type: 'a-input',
      fieldProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      name: 'frequency',
      label: '执行频率（天）',
      type: 'a-input-number',
      fieldProps: {
        span: 18,
        mode: 'button',
        min: 1,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      name: 'execution_time',
      label: '执行时间',
      type: 'a-time-picker',
      fieldProps: {
        span: 24,
        format: 'HH:mm',
      },
      rules: [
        {
          required: true,
          message: '请选择',
        },
      ],
    },
    {
      label: '状态',
      name: 'is_active',
      slotName: 'status',
      type: 'a-select',
      fieldProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请选择',
        },
      ],
      selectOptions: [
        {
          status: 'success',
          value: 1,
          label: '启用',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },
    {
      name: 'desc',
      label: '备注',
      type: 'a-textarea',
      fieldProps: {
        span: 24,
      },
    },
  ]);
</script>

<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      title="我申请的"
      :request="request"
      :tableType="tableType"
    >
      <template #btns></template>
      <template #options>
        <edit
          v-if="visible1"
          v-model:visible="visible1"
          :formType="sonformType"
          :params="editParam"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
      </template>
    </pro-table>
    <a-modal
      v-model:visible="showRun"
      ok-text="执行备份"
      @ok="handleRunBackup"
      :ok-loading="loading"
      @cancel="
        () => {
          showRun = false;
        }
      "
    >
      <template #title> 系统操作 </template>
      <div style="width: 100%; text-align: center"
        >是否立即执行系统备份，执行备份后系统会在后台自动执行数据备份。</div
      >
    </a-modal>
  </div>
</template>

<style scoped lang="less"></style>
